<main *ngIf="data != null">
  <div class="home-lists-container">
    <div class="landing-page-title-block">
      <div class="tooltip-base hoverable">
        <h2 class="center landing-page-title tooltip-dotted">
          Top Dart packages
        </h2>
      </div>
    </div>

    <ul class="package-list">
      <li class="list-item" *ngFor="let package of data.packages">
        <h3 class="title">
          <a [routerLink]="getDetailUrl(package)">{{ package.name }}</a>
        </h3>
        <p class="metadata">
          <span class="package-tag" *ngFor="let tag of package.tags"
            >{{ tag }}</span
          >
        </p>
        <p class="description">{{ package.description }}</p>
      </li>
    </ul>

    <div class="more">
      <a [routerLink]="RoutePaths.list.toUrl()">More Dart packages...</a>
    </div>
  </div>
</main>
